<!--
 @description 定制各分厂产量(套)
 @fileName FactoryBarChart.vue
 @author zengqiongying
 @created 2021/09/28 16:58:41
-->
<template>
  <div>
    <div :id="chartId" ref="myEchart" class="echart_container" />
  </div>
</template>

<script>
import ChartBarMixin from '@/mixins/ChartBar'
import { getCustomizedCompleteQuantity } from '@/apis/produces'
import { parseTime } from '@/utils'
export default {
  name: 'CustomizedFactoryBarChart',
  mixins: [ChartBarMixin],
  props: {
    selectDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }, // 日期
    barWidth: {
      type: String,
      default: ''
    },
    axisLabelFontSize: {
      type: Number,
      default: null
    },
    labelTextStyle: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      chartColors: [],
      factoryNames: [],
      activeIndex: 0
    }
  },
  watch: {
    selectDate(val, oldVal) {
      this.drawChart()
    }
  },
  created() {
    const _this = this
    const xAxis = this.echartOption.xAxis
    xAxis.axisLabel.rotate = 40 // X轴字体倾斜40度
    xAxis.axisLabel.fontSize = this.axisLabelFontSize ? this.axisLabelFontSize : 10 // 字体大小
    this.$set(this.echartOption, 'xAxis', xAxis)

    if (this.barWidth) {
      this.echartOption.series[0].barWidth = this.barWidth
    }
    if (this.labelTextStyle) {
      this.echartOption.series[0].itemStyle.normal.label.textStyle = Object.assign(
        {},
        this.echartOption.series[0].itemStyle.normal.label.textStyle,
        this.labelTextStyle
      )
    }

    this.echartOption.tooltip.formatter = (params) => {
      let tipMsg = ''
      for (const i in params) {
        const item = params[i]
        tipMsg += `${item.name}：<span style="color:${
          item.color
        }">${_this.foramtThousand(
          Number(item.data).toFixed(2)
        )}</span> <br>`
      }
      return `<div class="echart-tooltip-content">${tipMsg}</div>`
    }
  },
  methods: {
    async getChartData() {
      const xAxisData = []
      const seriesData = []
      const params = {
        date: this.selectDate
      }
      await getCustomizedCompleteQuantity(params)
        .then((res) => {
          if (res.data && res.data.length) {
            res.data.forEach((v) => {
              xAxisData.push(v.factoryName || '')
              seriesData.push(v.completedQuantity || 0)
            })
            // 最大数值设置为 黄色（#FEB81D），其他绿色(#12B9A3)
            const max = Math.max.apply(null, seriesData)
            this.chartColors = seriesData.map((v) => {
              return Number(v || 0) === Number(max || 0)
                ? '#FEB81D'
                : '#12B9A3'
            })
            this.$set(this.echartOption, 'color', this.chartColors)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.chart.chartData = {
        xAxisData: xAxisData,
        seriesData: [seriesData]
      }
      this.factoryNames = xAxisData
      this.getxAxisSelectData(this.activeIndex || 0)
    },
    // 获取当前高亮对应的x轴值
    getxAxisSelectData(xIndex) {
      this.activeIndex = xIndex
      const name = this.factoryNames[xIndex] || ''
      this.$emit('get-factory', name)
    }
  }
}
</script>
<style lang="less" scoped>
.echart_container {
    height: 300px;
}
</style>
